<template>
  <view class="">
    <swiper class="banner-swipe" circular :indicator-dots="true" :autoplay="true" :interval="3000">
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" class="banner-image" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    name: "SwiperImage",
    props: {
      banners: {
        type: Array,
        require: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .banner-swipe {
    height: 150px;
    margin: 10px 15px;
    border-radius: 8px;
    overflow: hidden;

    .banner-image {
      width: 100%;
      height: 100%;
    }
  }
</style>